<template>
  <div class="manage-content">
    <!-- 公共头 -->
    <header class="header-fiexed">
      <van-nav-bar :title="$route.meta.head.title"
                   left-arrow
                   @click-left="$router.go(-1)">
        <img class="share-icon"
             src="@/assets/image/share-icon.png"
             slot="right"
             @click="clickShare" />
      </van-nav-bar>
    </header>

    <!-- 赠送名额 -->
    <div class="pic-title title-1"></div>
    <div class="content-box-white flex quota">
      <div class="quota-item solid-right">
        <span class="quota-title">可送礼包</span>
        <div class="quota-num">{{manageInfo.wait_num || 0}}</div>
      </div>
      <div class="quota-item solid-right">
        <span class="quota-title">冻结礼包</span>
        <div class="quota-num">{{(manageInfo.quota_num - manageInfo.now_quota_num) || 0}}</div>
      </div>
      <div class="quota-item">
        <span class="quota-title">礼包总数</span>
        <div class="quota-num">{{manageInfo.quota_num || 0}}</div>
      </div>
    </div>

    <template v-if="manageInfo && manageInfo.claimed_list.length > 0">
      <!-- 已领取礼品名单 -->
      <div class="pic-title title-2"></div>
      <div class="content-box-white roster-list">
        <swiper class="roster-swiper"
                :options="rosterListConfig">
          <swiper-slide v-for="item in manageInfo.claimed_list"
                        :key="'roster_'+item.name"
                        class="roster-item flex align-center">
            <img class="avatar"
                 :src="item.claimed_img" />
            <span class="name flex-sub">{{item.member_name}}</span>
            <span class="desc">{{item.desc  || '成功领取了小礼包'}}</span>
          </swiper-slide>
        </swiper>
      </div>
    </template>

    <!-- 礼品区 -->
    <div class="pic-title title-3"></div>
    <!-- 商品区 -->
    <van-list :finished="!more"
              :loading="loading"
              @load="getGiftGoodsList"
              class="goods-content">
      <goods-module module-name="goods2n"
                    goodsImg="goods_img"
                    goodsName="goods_name"
                    goodsPrice="goods_price"
                    goodsId="goods_id"
                    :list="goodsList"
                    @clickGoods="clickGoods">
      </goods-module>
    </van-list>

    <!-- 分享悬浮窗 -->
    <div class="float-share"
         @click="clickShare">
      分享
    </div>

    <!-- canvas弹窗 -->
    <share-popup v-model="showSharePanel"
                 :shareLink="shareLink"></share-popup>
  </div>
</template>

<script>
import SharePopup from '@/components/SharePopup'
import GoodsModule from '@/components/GoodsModule'
import { mapState } from 'vuex'
import {
  enjoyLink,
  giftGoodsList,
  packageControl
} from '@/api/fcMemberSendGift'
export default {
  name: 'Manage',
  data() {
    return {
      showSharePanel: false, // 显示分享弹窗
      authority: {
        state: false,
        message: '你还没有分享权限，快先去升级把！'
      },
      shareLink: null, // 分享的链接，在点击分享的时候才会生成
      goodsList: [], // 小礼品列表哦
      manageInfo: {
        claimed_list: [] // 已领取人员列表
      }, // 管理信息
      more: true,
      loading: false,
      page: 1,
      // 轮播配置
      rosterListConfig: Object.freeze({
        direction: 'vertical',
        allowTouchMove: false,
        autoplay: true,
        loop: true,
        slidesPerView: 4
      })
    }
  },
  components: {
    SharePopup,
    GoodsModule
  },

  computed: {
    ...mapState({
      user: state => state.user.info
    })
  },

  created() {
    packageControl()
      .then(res => {
        // 领取消息
        this.manageInfo = res.result
        this.authority.state = true
      })
      .catch(res => {
        this.authority.state = false
        this.authority.message = res.message
        this.$toast({
          type: 'fail',
          message: res.message
        })
      })
  },

  methods: {
    /**
     * 选择商品
     */
    clickGoods(info) {
      this.$router.push({
        name: 'GoodsDetail',
        query: { goods_id: info.goods_id }
      })
    },
    /**
     * 点击分享
     */
    clickShare() {
      // 已经统计了分享的时间，则不在调用接口
      if (this.shareLink) {
        this.showSharePanel = true
        return false
      }

      // 没有权限分享
      if (!this.authority.state) {
        this.$toast({
          type: 'fail',
          message: this.authority.message
        })
        return false
      }
      // 验证是否有权限。获取分享的code
      let shareLink = `${window.location.origin}${window.location.pathname}?#/home/receive?inviter_id=${this.user.member_id}`
      enjoyLink()
        .then(res => {
          shareLink += `&code=${res.result.code}`
          this.shareLink = shareLink
          this.showSharePanel = true
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message
          })
        })
    },
    /**
     * 获取小礼物列表
     */
    getGiftGoodsList() {
      giftGoodsList()
        .then(res => {
          this.goodsList = [...this.goodsList, ...res.result.data]
          this.more = !(this.page === res.result.last_page)
          this.page += 1
          this.loading = false
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message
          })
        })
    }
  }
}
</script>

<style lang="scss">
.manage-content {
  background: linear-gradient(
    135deg,
    rgba(255, 123, 93, 1) 0%,
    rgba(255, 90, 129, 1) 100%
  );
  min-height: 100vh;

  .share-icon {
    width: 16px;
    height: 16px;
    margin: 15px;
  }

  .pic-title {
    background-position: center;
    background-size: auto 20px;
    height: 65px;
    background-repeat: no-repeat;
    &.title-1 {
      background-image: url('../../../assets/image/manage-title-1.png');
    }
    &.title-2 {
      background-image: url('../../../assets/image/manage-title-2.png');
    }
    &.title-3 {
      background-image: url('../../../assets/image/manage-title-3.png');
    }
  }

  .content-box-white {
    background-color: #ffffff;
    margin: 0 25px;
    border-radius: 10px;
    &.quota {
      padding: 25px 0;
      text-align: center;
      font-size: 14px;
      .quota-item {
        flex: 1;
        .quota-title {
          color: #666666;
          font-size: 14px;
          position: relative;
          padding-right: 22px;
          &::after {
            position: absolute;
            content: '(个)';
            bottom: 0;
            right: 0;
            font-size: 80%;
          }
        }
        .quota-num {
          color: #333333;
          font-size: 20px;
          font-weight: bold;
          margin-top: 20px;
        }
      }
    }

    &.roster-list {
      padding: 15px 30px 0 30px;
      .roster-swiper {
        height: 160px;
        overflow: hidden;
      }
      .roster-item {
        height: 25px !important;
        font-size: 14px;
        margin-bottom: 15px;
        .avatar {
          width: 25px;
          height: 25px;
          border-radius: 50%;
        }
        .name {
          margin: 0 5px;
          color: #333333;
          font-size: 14px;
        }
        .desc {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }

  //商品信息
  .goods-content {
    padding: 0 10px;
    .goods-price {
      color: #f73b3c !important;
      font-size: 18px !important;
      font-weight: bold !important;
    }
    .eshowBtn {
      border-color: #f73b3c !important;
      background-color: #f73b3c;
      color: #ffffff !important;
      font-size: 12px !important;
    }
  }

  // 悬浮分享
  .float-share {
    background: rgba(0, 0, 0, 0.5);
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 22.5px;
    color: #ffffff;
    font-size: 14px;
    position: fixed;
    right: 5px;
    top: 50vh;
    z-index: 100;
    &:active {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
